<!-- 正在上传页面 -->
<template>
  <div>
    <div class="successTransfer" v-if="fileList && fileList.length > 0">
      <div class="tabHander">
        <div style="display: flex;height: 100%; align-items: center;">
          <!-- <div style="font-size: 14px;">上传总进度</div>
          <div class="progress">
            <a-progress :percent="80" strokeColor="#0273c4" trailColor="#e5e6ea" />
          </div> -->
        </div>
        <a-space>
          <a-button size="small" type="primary" @click="resumeAllUpload">
            <span style="display: flex;align-items: center;font-size: 12px;">全部开始</span>
          </a-button>
          <a-button size="small" type="primary" @click="pauseAllUpload">
            <span style="display: flex;align-items: center;font-size: 12px;">全部暂停</span>
          </a-button>
          <a-button size="small" type="primary" @click="deleteAllUpload">
            <span style="display: flex;align-items: center;font-size: 12px;">全部取消</span>
          </a-button>
        </a-space>
      </div>
      <a-table size="small" rowKey="itemID" :columns="columns" :data-source="fileList" :show-header="false"
        :pagination="false">
        <template #bodyCell="{ column, record }">
          <!-- <template v-if="column.dataIndex === 'index'">
            <span>
              {{ index + 1 }}
            </span>
          </template> -->
          <template v-if="column.dataIndex === 'name'">
            <div> {{ record.name }} </div>
            <div class="textColor">{{ record.status.size }}</div>
          </template>
          <template v-if="column.dataIndex === 'time'">
            <span class="textColor">
              {{ record.strTime || '--' }}
            </span>
          </template>
          <template v-if="column.dataIndex === 'progress'">
            <a-progress :showInfo="false" :percent="record.status.transRage" strokeColor="#0273c4" trailColor="#e5e6ea" />
            <span style="font-size: 12px; color: #999;">{{
              statusMap[record.status.state]
            }}</span>
          </template>
          <template v-if="column.dataIndex === 'action'">
            <div class="actionSty">
              <!-- 开始下载 -->
              <a-tooltip placement="bottom" color="#666" v-if="![1, 2].includes(record.status.state)">
                <template #title>
                  <span style="font-size: 12px;">开始</span>
                </template>
                <play-circle-outlined @click="resumeUpload(record)" />
              </a-tooltip>
              <!-- 暂停 -->
              <a-tooltip placement="bottom" color="#666" v-else>
                <template #title>
                  <span style="font-size: 12px;">暂停</span>
                </template>
                <pause-outlined @click="pauseUpload(record)" />
              </a-tooltip>
              <!-- 取消上传 -->
              <a-tooltip placement="bottom" color="#666">
                <template #title>
                  <span style="font-size: 12px;">取消上传</span>
                </template>
                <close-outlined @click="deleteUpload(record)" />
              </a-tooltip>
              <!-- 打开所在文件夹 -->
              <a-tooltip placement="bottom" color="#666">
                <template #title>
                  <span style="font-size: 12px;">打开所在文件夹</span>
                </template>
                <folder-outlined />
              </a-tooltip>
            </div>
          </template>
        </template>
      </a-table>
    </div>

    <!-- 没有传输任务 -->
    <div class="empty" v-else>
      <div class="centerfile">
        <img src="@/assets/images/empty-up.png" style="width: 200px;">
        <p>当前没有上传任务喔~</p>
      </div>
    </div>
  </div>
</template>

<script>
import { PlayCircleOutlined, CloseOutlined, PauseOutlined, FolderOutlined } from '@ant-design/icons-vue'
import {
  getUploadListGRPC,
  pauseUploadGRPC,
  resumeUploadGRPC,
  deleteUploadGRPC,
  getStateByIDGRPC,
  deleteAllUploadGRPC,
  pauseAllUploadGRPC,
  resumeAllUploadGRPC
} from '@/api/grpcLoad'
export default {
  name: 'downLoading',
  components: {
    PlayCircleOutlined,
    CloseOutlined,
    PauseOutlined,
    FolderOutlined
  },
  data() {
    return {
      InterTimer: null,
      columns: [
        {
          dataIndex: 'name',
          key: 'name',
          width: 200,
        },
        {
          dataIndex: 'time',
          key: 'time',
          width: 100,
          align: "center",
        },
        {
          dataIndex: 'progress',
          key: 'progress',
          width: 100,
        },
        {
          dataIndex: 'action',
          key: 'action',
          width: 120,
          align: "center",
        },
      ],
      fileList: [],
      statusMap: {
        0: '无状态',
        1: '等待中',
        2: '上传中',
        3: '已完成',
        4: '错误',
        5: '暂停',
        6: '停止'
      }
    }
  },
  methods: {
    // 获取上传列表
    getList() {
      clearInterval(this.InterTimer)
      const updateList = async () => {
        const res = await getUploadListGRPC();
        this.fileList = [];
        console.log('res', res)
        if (res.length === 0) return
        res.forEach(item => {
          if (item.parentID === "") {
            this.fileList.push(item);
          } else {
            const parent = res.find(parentItem => parentItem.itemID === item.parentID);
            if (parent) {
              if (!parent.children) parent.children = [];
              parent.children.push(item);
            }
          }
        });
        console.log('获取上传列表', this.fileList);
        if (this.fileList.length === 0) return clearInterval(this.InterTimer)
      };

      // 立即执行一次
      updateList();

      // 然后每隔1秒执行一次
      this.InterTimer = setInterval(updateList, 1000);
    },
    // 开始/恢复上传
    async resumeUpload(record) {
      // const params = {
      //   itemID: record.itemID,
      //   name: record.name,
      //   parentID: record.parentID,
      //   type: record.type // 0文件、1文件夹(目录)
      // }
      const res = await resumeUploadGRPC(record.itemID)
      console.log('恢复上传', res)
      this.getList()
      this.getStateByID(record)
    },
    // 暂停上传
    async pauseUpload(record) {
      record.isUpload = false
      const params = {
        itemID: record.itemID,
        method: 1, // 0/1
      }
      const res = await pauseUploadGRPC(params)
      console.log("暂停上传", res)
      this.getList()
    },
    // 移除上传
    async deleteUpload(record) {
      // const params = {
      //   itemID: record.itemID,
      //   name: record.name,
      //   parentID: record.parentID,
      //   type: record.type // 0文件、1文件夹(目录)
      // }
      const res = await deleteUploadGRPC(record.itemID)
      console.log('移除上传', res)
      this.getList()
    },
    // 获取状态
    async getStateByID(record) {
      // const interval = setInterval(async () => {
      await getStateByIDGRPC(record.itemID)
      this.getList()
      //   record.status = res
      //   if ([0, 3, 4, 5, 6].includes(res.state) || res.transRage === 100) {
      //     clearInterval(interval)
      //   }
      // }, 1000)
    },
    // 全部开始
    async resumeAllUpload() {
      const res = await resumeAllUploadGRPC()
      console.log(res)
    },
    // 全部暂停
    async pauseAllUpload() {
      const res = await pauseAllUploadGRPC(0) // 0,1
      console.log(res)
    },
    // 全部取消
    async deleteAllUpload() {
      const res = await deleteAllUploadGRPC()
      console.log(res)
    }
  },
  created() {
    this.getList()
  },
  beforeUnmount() {
    this.InterTimer && clearInterval(this.InterTimer)
  }
}
</script>